<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="radio" name="size" id="xs" value="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" id="s" value="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" id="m" value="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" id="l" value="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" id="xl" value="xl">
        <label for="xl">XL</label>
    </div>
    <p><button id="btn">show selected value</button></p>
    <p id="output"></p>
    <script>
        const btn = document.querySelector("#btn");
        const radioButtons = document.querySelectorAll('input[type="radio"]');
        btn.addEventListener("click", () => {
            for (let radioButton of radioButtons) {
                if (radioButton.checked) {
                    document.querySelector("#output").innerHTML = radioButton.value;
                }
            }
        })

    </script>
</body>

</html>